<template>
    <h2>房型展示页面</h2>
    房型名称<input type="text" v-model="tname" />
    <input type="button" value="查询" @click="SelectData"/>
    <input type="button" value="添加" @click="addRoomType"/>
    <input type="button" value="导出" @click="ImportFiles"/>
    <table border="1">
       <thead>
        <tr style="background-color: rgba(43, 0, 255, 0.685);">
            <td>房型编号</td>
            <td>房型名称</td>
            <td>门市价</td>
            <td>押金</td>
            <td>面积</td>
            <td>可住人数</td>
            <td>房型图片</td>
            <td>是否加床</td>
            <td>是否投放</td>
            <td>操作</td>
        </tr>
       </thead>
       <tbody>
        <tr v-for="item in rtype">
            <td>{{item.RT_Id}}</td>
            <td>{{item.RT_Name}}</td>
            <td>{{item.RT_Price}}</td>
            <td>{{item.RT_Deposit}}</td>
            <td>{{ item.RT_Size }}</td>
            <td>{{item.RT_Num}}</td>          
            <td>
                <img style="width:50px;height:50px;" :src="item.RT_Img"/>
            </td>
            <td>{{item.RT_AddBed==true?"加床":"不加床"}}</td>
            <td>{{ item.RT_State==true?"投放":"不投放" }}</td>
            <td>
                <a href="#">{{ item.RT_State==true?"不投放":"投放" }}</a>
              
                <input type="button" value="删除" @click="delRoomType(item.RT_Id)"/>
                <input type="button" value="编辑" @click="editRoomType(item.RT_Id)"/>
            </td>
        </tr>
       </tbody>
    </table>
    共{{ page.count }}页,每页{{ page.size }}条，第{{ page.index }}/{{ page.pcount }}页
    <a href="#" style="margin-right:10px" @click="PageChange('F')">首页</a>
    <a href="#" style="margin-right:10px" @click="PageChange('P')">上一页</a>
    <a href="#" style="margin-right:10px" @click="PageChange('N')">下一页</a>
    <a href="#" style="margin-right:10px" @click="PageChange('E')">尾页</a>
    <select v-model="csize" @change="ChangeSize">
        <option value="1">1条/每页</option>
        <option value="2">2条/每页</option>
        <option value="3">3条/每页</option>
    </select>
    <input type="text" v-model="nindex" style="width:20px"/>
    <input type="button" value="跳转" @click="jump"/>
</template>

<script setup lang="ts">
 import {ref,onMounted} from 'vue'
 import {useRouter} from 'vue-router'
 const router=useRouter();
 import axios from 'axios'
const editRoomType=(RT_Id:number)=>{
    router.push({
        path:'/editRoomType',
        query:{
            tid:RT_Id
        }
    })
}

const delRoomType=(RT_Id:number)=>{
    if(confirm('确定删除吗'))
    {
        axios.delete('https://localhost:44320/api/Room/TypeDel',{
        params:{
            tid:RT_Id
        }
    })
    .then(res=>{
        if(res.data>0)
        {
            alert('删除成功');
            page.value.index=1;
            loadData();
        }
        else
        { 
           alert('删除失败');
       }
    })
    }
}


 const PageChange=(mes:string)=>{
    switch(mes)
    {
        case 'F':page.value.index=1;break;
        case 'P':
            if(page.value.index>1)
            {
                page.value.index--;
            }
            else
            {
                alert('已经是第一页了');
            }
            break;
        case 'N':
            if(page.value.index<page.value.pcount)
            {
                page.value.index++;
            }
            else
            {
                alert('已经是最后一页了');
            }
            break;
        case 'E':page.value.index=page.value.pcount;break;
    }
    loadData();
 }
const csize=ref(2);
const ChangeSize=()=>{
    page.value.size=csize.value;
    page.value.index=1;
    loadData();
}
const nindex=ref("");
const jump=()=>{
    if(nindex.value=="")
    {
        alert("请输入页码");
        return;
    }
    if(isNaN(Number(nindex.value)))
    {
        alert('请输入数字');
        return;
    }
    if(Number(nindex.value)>=1&&Number(nindex.value)<=page.value.pcount)
    {
        page.value.index=Number(nindex.value);
        loadData();
    }
    else
    {
        alert('请输入有效页码');
        return;
    }

}

//导出数据
const ImportFiles=()=>{
    axios.get('https://localhost:44320/api/Room/ExportFile',{
        params:{
            PathName:"C:\\Users\\23285\\Desktop\\ExportFile\\Test.xlsx"//转义
        }
    })
    .then(res=>{
        console.log(res.data);
        if(res.data>0)
        {
            alert('导出成功');
        }
        else
        {
            alert('导出失败');
        }
    })
    loadData();
}


 const rtype=ref([{
    "RT_Id": 1,
    "RT_Name": "普通标间",
    "RT_Price": 100,
    "RT_Deposit": 100,
    "RT_Size": 50,
    "RT_Num": 1,
    "RT_AddBed": false,
    "RT_Img": "https://localhost:44320/Images/1.png",
    "RT_Info": "满足基本出差需要",
    "RT_State": true
  }])
  const tname=ref("");
  const page=ref({
    count:0,
    pcount:0,
    size:2,
    index:1
  })
  onMounted(()=>{
    loadData();
  })
  const loadData=()=>{
    axios.get('https://localhost:44320/api/Room/TShow',{
        params:{
            index:page.value.index,          
            size:page.value.size,
            tname:tname.value          
        }
    })
    .then(res=>{
        rtype.value=res.data.pageList;
        page.value.count=res.data.count;
        page.value.pcount=res.data.pcount;
    })
  }
  const SelectData=()=>{
    page.value.index=1;
    loadData();
  }
  const addRoomType=()=>{
    router.push('/addRoomType');
  }
</script>